<template>
  <div class="container-fluid">
    <div class="row school-model school-tiao">
      <div class="col school-tiao-left">
        <span>上课签到</span>
      </div>
      <div class="col text-right">
        <a-button-group>
          <a-button @click="add()" type="primary">添加补课学员</a-button>
          <a-button type="primary">
            <router-link :to="{name:'上课签到'}" class="text-white">返回</router-link>
          </a-button>
        </a-button-group>
      </div>
    </div>
    <div class="row school-model index-model">
      <div class="col school-col-table">
        <table class="table table-borderless" v-if="schedule">
          <tbody>
            <tr>
              <td>
                <span>班级：</span>
                <span>{{schedule.schoolclazz.name}}</span>
              </td>
              <td>
                <span>教室：</span>
                <span>{{getschoolclassroombyid( schedule.schoolclassroomid).name}}</span>
              </td>
              <td>
                <span>课程：</span>
                <span>{{ schedule.info }}</span>
              </td>
            </tr>
            <tr>
              <td>
                <span>上课时间：</span>
                <span>{{totime(schedule.starttime)}} &nbsp;{{schedule.schoolclasstime}}</span>
              </td>
              <td>
                <span>教师：</span>
                <span>{{getschooluserbyid( schedule.schooluserid).name}}</span>
              </td>
              <td>
                <span>助教：</span>
                <span>{{ usernameids(schedule.schooluserids) }}</span>
              </td>
            </tr>
          </tbody>
        </table>
        <el-dialog class="school-form" title="添加补课人员" width="810px" :visible.sync="setaddress">
          <Makeuplessons
            v-bind="{submit, setaddress, setsubmit, schoolclazzscheduleid:Number(ID), student: datas, schedule}"
          ></Makeuplessons>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" size="mini" @click="submit = true">确 定</el-button>
            <el-button @click="setaddress = false" size="mini">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <div class="row school-model index-model">
      <div class="col school-col-table">
        <div
          class="float-left"
          v-for="(v, i ) in tableDatas"
          :key="`1classsigin${i}`"
          @click="changecalendr(v, i)"
        >
          <schoolcard v-bind="{type:v.calendartype, name: v.name, imagesrc:v.headimg }"></schoolcard>
        </div>
        <div class="float-none"></div>
      </div>
    </div>
    <div class="row school-model index-model">
      <div class="col-8 text-right">
        上课签到完成后请别忘记提交 ——>
        <el-button size="small" type="success" @click="submitForm">提交</el-button>
      </div>
      <div class="col-4"></div>
    </div>
    <div class="row school-model index-model">
      <div class="col-12">
        <h5>补课人员</h5>
      </div>
      <div class="col-12 school-col-table">
        <div class="float-left" v-for="(v, i ) in tableData2" :key="`2classsigin${i}`">
          <schoolcard v-bind="{type:v.calendartype, name: v.name, imagesrc:v.headimg }"></schoolcard>
        </div>
        <div class="float-none"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  asynccreatschoolclazzstudentcalendar,
  asyncgetschoolclazzschedule
} from "../../../../plugins/api.js";
import Makeuplessons from "../Makeuplessons/index.vue";
import schoolcard from "../../../../components/card.vue";
import { totime, messagesend, isinclass } from "../../../utils.js";
import * as moment from "moment";

export default {
  name: "classsignin",
  data() {
    return {
      setaddress: false,
      title: "添加补课人员",
      tableDatas: [],
      tableData2: [],
      datas: [],
      ruleForm: {
        ID: "",
        type: "",
        uid: "",
        schoolstudentid: "",
        schoolclazzscheduleid: ""
      },
      schedule: null,
      submit: false
    };
  },
  props: ["ID"],
  async mounted() {
    this.start();
  },
  computed: {
    ...mapGetters([
      "getschoolclazz",
      "getschooluser",
      "getschoolclassroom",
      "getschoolstudent",
      "getuser",
      "getschoolclassroombyid",
      "getschooluserbyid",
      "getschoolstudentbyid"
    ])
  },
  watch: {
    $route() {
      this.start();
    }
  },
  methods: {
    totime,
    async start() {
      const n = new Date().toLocaleDateString();
      try {
        const schedule = await asyncgetschoolclazzschedule({
          ID: this.ID,
          starttime: new Date(n),
          uid: true
        });
        this.schedule = schedule[0];
      } catch (err) {
        this.$router.push("/");
        return;
      }
      const {
        schoolclazz,
        schoolclazzstudentcalendar,
        starttime
      } = this.schedule;
      const { schoolstudentschoolclazz } = schoolclazz;
      const ids = isinclass(schoolstudentschoolclazz, starttime).map(
        v => v.schoolstudentid
      );
      const s = new Set(ids);
      const data = [];
      for (let id of s) {
        const v = this.getschoolstudentbyid(id);
        const d = schoolclazzstudentcalendar.find(
          vo => vo.schoolstudentid == v.ID
        );
        if (d) {
          v.calendartype = d.type;
          v.calendar = d;
        }
        data.push(v);
      }
      this.datas = data;
      this.tableDatas = JSON.parse(JSON.stringify(data));
      const data2 = schoolclazzstudentcalendar.filter(
        v => !ids.includes(v.schoolstudentid)
      );
      this.tableData2 = data2.map(v => {
        const student = this.getschoolstudentbyid(v.schoolstudentid);
        const calendartype = v.type;
        return {
          ...student,
          calendartype
        };
      });
    },
    add(v) {
      this.setaddress = true;
      if (v) {
        this.title = "修改时间";
        this.ruleForm = JSON.parse(JSON.stringify(v));
      } else {
        this.title = "添加时间";
        this.ruleForm = {
          starttime: "",
          endtime: "",
          schooladdressid: 0
        };
      }
    },
    async submitForm() {
      this.$notify.info({
        title: "提示",
        message: "提交中"
      });
      try {
        for (let v of this.tableDatas) {
          if (v.isup) {
            const ruleForm = {
              type: v.calendartype,
              schoolstudentid: v.ID,
              schoolclazzscheduleid: this.ID
            };
            if (v.calendar) {
              ruleForm.ID = v.calendar.ID;
            }
            await asynccreatschoolclazzstudentcalendar(ruleForm);
            if (!ruleForm.ID) {
              const { schedule, getuser } = this;
              const time = moment(schedule.starttime).format("YYYY-MM-DD");
              await this.messagesend(
                v.ID,
                v.name,
                schedule.info,
                time,
                getuser.name,
                v.calendartype
              );
            }
          }
        }
        await this.start();
        this.$notify({
          title: "成功",
          message: "提交成功",
          type: "success"
        });
      } catch (err) {
        this.$notify({
          title: "错误",
          message: "提交失败",
          type: "error"
        });
      }
    },
    changecalendr(v, index) {
      let x = v.calendartype ? "" : "上课";
      v.calendartype = x;
      v.isup = v.isup ? false : true;
      this.tableDatas.splice(index, 1, v);
    },
    usernameids(id) {
      if (id) {
        const data = this.getschooluser.find(v => v.ID == id);
        return data ? data.name : "";
      }
      return "";
    },
    messagesend,
    async setsubmit(n) {
      this.setaddress = false;
      this.submit = n;
      await this.start();
    }
  },
  components: {
    schoolcard,
    Makeuplessons
  }
};
</script>

<style lang="scss" scoped>
.index-model {
  margin-top: 13px;
}
.float-left {
  margin-left: 12px;
  margin-right: 24px;
}
</style>